<template>
    <div>
    <img class="logo" src="../assets/logo.png">
    <hello></hello>
    <p>
        <mt-button type="primary" size="small" @click="toast('primary')">primary</mt-button>
        <mt-button type="default" size="small" @click="toast('default')">default</mt-button>
        <mt-button type="danger" size="small" @click="toast('danger')">danger</mt-button>
    </p>
        </div>
</template>

<script>
    import {Toast, Button} from 'mint-ui'
    export default {
        components: {
            Toast,
            Button
        },
        methods: {
            toast: function(str){
                Toast({
                    message: str,
                    duration: 3000
                });
            }
        }
    }
</script>

<style scoped>
    #app {
        color: #2c3e50;
        margin-top: -100px;
        max-width: 600px;
        font-family: Source Sans Pro, Helvetica, sans-serif;
        text-align: center;
    }

    #app a {
        color: #42b983;
        text-decoration: none;
    }

    .logo {
        width: 100px;
        height: 100px
    }
</style>
